<!DOCTYPE html>
<html>
<head>
<title>Rectangular Plate on Springs</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and Font Settings ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 1.5;
  ctx.font = 'italic 18px Times New Roman';

  // --- Plate Corner Coordinates ---
  const P_bl = { x: 140, y: 100 }; // back-left
  const P_br = { x: 380, y: 100 }; // back-right
  const P_fl = { x: 110, y: 170 }; // front-left
  const P_fr = { x: 350, y: 170 }; // front-right

  // --- Helper function to draw a spring ---
  function drawSpring(x_start, y_start) {
    const length = 40;
    const amplitude = 8;
    const coils = 4;
    const step = length / (coils * 2);
    const startOffset = 3;

    ctx.beginPath();
    ctx.moveTo(x_start, y_start);
    ctx.lineTo(x_start, y_start + startOffset);
    
    let y = y_start + startOffset;
    for (let i = 0; i < coils; i++) {
      ctx.lineTo(x_start - amplitude, y + step);
      y += step;
      ctx.lineTo(x_start + amplitude, y + step);
      y += step;
    }
    ctx.lineTo(x_start, y + step);
    ctx.stroke();
    
    const y_end = y + step;
    // Base attachment line
    ctx.beginPath();
    ctx.moveTo(x_start - 12, y_end);
    ctx.lineTo(x_start + 12, y_end);
    ctx.stroke();
  }

  // --- Drawing the main components ---

  // 1. Draw the four springs and their 'k' labels
  drawSpring(P_bl.x, P_bl.y);
  ctx.fillText('k', P_bl.x + 12, P_bl.y + 30);

  drawSpring(P_br.x, P_br.y);
  ctx.fillText('k', P_br.x - 22, P_br.y + 30);

  drawSpring(P_fl.x, P_fl.y);
  ctx.fillText('k', P_fl.x + 12, P_fl.y + 30);
  
  drawSpring(P_fr.x, P_fr.y);
  ctx.fillText('k', P_fr.x - 22, P_fr.y + 30);

  // 2. Draw the rectangular plate
  ctx.beginPath();
  ctx.moveTo(P_bl.x, P_bl.y);
  ctx.lineTo(P_br.x, P_br.y);
  ctx.lineTo(P_fr.x, P_fr.y);
  ctx.lineTo(P_fl.x, P_fl.y);
  ctx.closePath();
  ctx.stroke();

  // 3. Draw dimension lines and labels 'a' and 'b'
  ctx.lineWidth = 1;

  // Dimension 'a' (length)
  const y_dim_a = 60;
  ctx.beginPath();
  ctx.moveTo(P_bl.x, y_dim_a);
  ctx.lineTo(P_br.x, y_dim_a);
  // Ticks for 'a'
  ctx.moveTo(P_bl.x, y_dim_a - 5);
  ctx.lineTo(P_bl.x, y_dim_a + 5);
  ctx.moveTo(P_br.x, y_dim_a - 5);
  ctx.lineTo(P_br.x, y_dim_a + 5);
  // Extension lines
  ctx.moveTo(P_bl.x, P_bl.y);
  ctx.lineTo(P_bl.x, y_dim_a);
  ctx.moveTo(P_br.x, P_br.y);
  ctx.lineTo(P_br.x, y_dim_a);
  ctx.stroke();
  ctx.fillText('a', (P_bl.x + P_br.x) / 2, y_dim_a - 8);

  // Dimension 'b' (width)
  const b_start = {x: 80, y: 86};
  const b_end = {x: 50, y: 156};
  ctx.beginPath();
  // Main line for 'b'
  ctx.moveTo(b_start.x, b_start.y);
  ctx.lineTo(b_end.x, b_end.y);
  // Ticks for 'b' (approximating perpendicular)
  ctx.moveTo(b_start.x - 4, b_start.y + 5);
  ctx.lineTo(b_start.x + 4, b_start.y - 5);
  ctx.moveTo(b_end.x - 4, b_end.y + 5);
  ctx.lineTo(b_end.x + 4, b_end.y - 5);
  // Extension lines for 'b'
  ctx.moveTo(P_bl.x, P_bl.y);
  ctx.lineTo(b_start.x, b_start.y);
  ctx.moveTo(P_fl.x, P_fl.y);
  ctx.lineTo(b_end.x, b_end.y);
  ctx.stroke();
  ctx.fillText('b', b_start.x - 20, (b_start.y + b_end.y) / 2);

  // 4. Draw the figure caption
  ctx.font = 'bold 16px Times New Roman';
  ctx.textAlign = 'center';
  ctx.fillText('Fig. 2.36.', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>